<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      bgcolor="rgb(55, 81, 255) !important"
      bgImage="linear-gradient(rgb(55, 81, 255) 0%, rgb(76, 99, 255) 50%, rgb(91 112 255) 75%, rgb(107 127 255) 100%) !important"
      >更多课程</navbar
    >
    <div style="height: 0.45rem"></div>
    <div class="content">
      <div
        class="box"
        v-for="(item, index) in aiList"
        @click="toClass(item)"
        :key="index"
      >
        <van-image width="100%" height="1rem" :src="item.banner" />
        <p class="titles">
          {{ item.title }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import { Toast, Dialog } from "vant";
import { getClassbysort } from "@/api/doctor";
import { mapGetters } from "vuex";
export default {
  name: "classMore",
  data() {
    return {
      aiList: [],
    };
  },

  components: { navbar },

  computed: {
    ...mapGetters(["classNum"]),
  },

  created() {
    this.getList(this.$route.params.sortId);
    if (this.classNum != null) {
      this.getList(this.classNum);
    } else {
      this.getList(this.$route.params.sortId);
    }
  },
  mounted() {},

  methods: {
    // 返回上一页
    goBack() {
      this.$router.replace({ path: "/Training" });
      this.$store.commit("list/SET_CLASSNUM", null);
    },
    // 列表
    getList(i) {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        overlay: true,
        message: "加载中",
      });
      let data = {
        sortId: i,
      };
      getClassbysort(data).then((res) => {
        if (res.data.status == 200) {
          this.aiList = res.data.info;
          Toast.clear();
        } else {
          Toast.fail(res.data.msg)
        }
      });
    },
    // 课程详情
    toClass(item) {
      this.$store.commit("list/SET_CLASSNUM", this.$route.params.sortId);
      this.$router.push({
        name: "classDetail",
        params: {
          classId: item.classId,
        },
      });
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  padding-bottom: 0.2rem;
  & .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    margin: auto;
    & .box {
      width: 48%;
      margin-top: 0.1rem;
      & .titles {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        margin-top: 0.05rem;
        text-align: left;
        font-size: 0.14rem;
        line-height: 0.2rem;
      }
    }
  }
}
</style>